 <!-- 创建课程
修改人：曾俊达
时间：2020/6/22  -->
<template>
    <div class="about">
        <!--查询界面-->
        <!-- <h4>租客</h4> -->
        <div>
            <el-form ref="searchForm" :model="searchForm" :inline="true" label-width="80px">
                <el-col :xl="6" :md="8" :sm="24">
                    <el-form-item label="课程名称" prop="courseName">
                        <el-input placeholder="请输入课程名称" v-model="searchForm.courseName" clearable></el-input>
                    </el-form-item>
                </el-col>

                <el-col :xl="6||24" :md="8||24" :sm="24">
                    <el-form-item>
                        <div :style=" { float: 'right', overflow: 'hidden' } || {} ">
                            <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
                            <el-button class="ml-5" icon="el-icon-refresh-left" @click="reset">重置</el-button>
                        </div>
                    </el-form-item>
                </el-col>
            </el-form>
        </div>
        <page-table @load-table-data="loadTableData" ref="dataTable" @selection-change="selection" row-key="id">
            <template slot="tb-columns">

                <el-table-column align="center" prop="avatarUrl" label="课程封面" >
                    <template slot-scope="scope">
                        <img :src="scope.row.avatarUrl" width="80" height="80" />
                    </template>
                </el-table-column>
                 <el-table-column  label="课程名称" width="100">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                        <p>课程描述: {{ scope.row.courseDescription}}</p>
                        <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.courseName }}</el-tag>
                        </div>
                        </el-popover>
                    </template>
              </el-table-column>
               <el-table-column align="center" prop="courseType" label="课程类型"></el-table-column>
                <el-table-column align="center" prop="teacher" label="任课教师"></el-table-column>
                

                <el-table-column fixed="right" align="center" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button type="warning" plain @click="edit(scope.row)">修改课程</el-button>
                          <el-divider direction="vertical"></el-divider>
                        <el-button type="primary" plain @click="kczx(scope.row)">课程中心</el-button>
                    </template>
                </el-table-column>

            </template>
        </page-table>
        <!-- 弹出添加的窗口 -->
        <Edit :visible='visible' :title='title' :defaultFormData='defaultFormData' v-if='visible' @close='close' />

  <Edit_picture :visible='visible_picture' :title="title" :defaultFormData='defaultFormData' 
  v-if='visible_picture' @close = 'close'/>
    </div>
</template>



<script>
    import PageTable from '@/components/common/PageTable'
    import {passpage,updateUseful,remove} from '@/api/modules/create_class'
    import Edit from '@/views/teacher/create_class/class_edit'
    import Edit_picture from '@/views/edit/edit_alter_coursePicture'
    // import About from './about'
    import {setCookie,getCookie} from '@/libs/cookie'
    export default {
        name: "manage_class",
        components: {
            PageTable,
            Edit,Edit_picture
        },
        data() {

            return {
                searchForm: {
                    name: ''
                },
                multipleSelection: [],
                visible: false,
                visible_picture: false,
                username: '',
                defaultFormData: {},
                user:{},
                course:{
                    courseID:''
                }
            };
        },

        mounted(){
             
        },
        methods: {
            //课程中心
            kczx(row){
                this.course.courseID = row.id
                
                setCookie('courseID',this.course)
                let courseID = JSON.parse(getCookie("courseID") || '{}');
                console.log(courseID.courseID)
                this.navigator('/classdetail');
            },
            //删除
            remove(id) {

                //弹窗询问是否删除
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    remove(id).then(res => {
                        this.toast(res.message)
                        //重新刷新表单数据
                        this.$refs.dataTable.loadTableData('reload')
                    })
                }).catch(err => {
                    this.toast(err, 2)
                    this.$refs.dataTable.loadTableData('reload')
                })
            },

            edit(row) {
                this.visible_picture = true
                this.title = '修改课程'
                this.defaultFormData = row
            },

            close(val) {
                this.visible = false
                this.visible_picture = false
                if (val) {
                    this.$refs.dataTable.loadTableData('reload')
                }
            },

            add() {
                this.visible = true
                this.title = '申请课程'
                this.defaultFormData = {}
            },

            // kczx(row) {
            //     //console.log(row)
            //     // this.visible = true
            //     // this.title = '编辑'
            //     this.defaultFormData = row
            // },

            stateFormat(row) {
                if (row.sex === 1) {
                    return '男'
                } else {
                    return '女'
                }
            },

            loadTableData(filter, callback) {
                this.user = JSON.parse(getCookie("user") || '{}');
                filter = {
                    ...filter,
                    ...this.searchForm,
                    ...this.user
                }
                passpage(filter).then(res => {
                    this.total = res.data.total
                    // console.log(this.total)
                    let tableData = {
                        ...res.data,
                        data: res.data.records

                    }
                    callback(tableData)

                })
            },
            selection(val) {
                this.multipleSelection = val;
            },
            search() {
                this.$refs.dataTable.loadTableData('reload')
            },
            reset() {
                this.$refs.searchForm.resetFields()
                this.$refs.dataTable.loadTableData('reload')
            },


        }
    };
</script>
